<!--  -->
<template>
    <HomeBox title="房源" titleClass="bg-white text-black">
        <z-paging
            ref="paging"
            v-model="list"
            @query="queryList"
            :fixed="false"
            :paging-style="{
                height: '100%',
            }"
        >
            <template #top>
                <view class="w-full">
                    <uni-search-bar
                        class="w-full"
                        v-model="searchValue"
                        placeholder="请输入内容"
                        bgColor="#f5f5f5"
                        @confirm="search"
                        @blur="search"
                    />
                </view>
                <view class="grid grid-cols-5 gap-2 px-2">
                    <uni-data-select
                        v-model="searchRegion"
                        :localdata="range"
                        :clear="false"
                        @change="change"
                    ></uni-data-select>
                    <uni-data-select
                        v-model="searchRegion"
                        :localdata="range"
                        :clear="false"
                        @change="change"
                    ></uni-data-select>
                    <uni-data-select
                        v-model="searchRegion"
                        :localdata="range"
                        :clear="false"
                        @change="change"
                    ></uni-data-select>
                    <uni-data-select
                        v-model="searchRegion"
                        :localdata="range"
                        :clear="false"
                        @change="change"
                    ></uni-data-select>
                    <uni-data-select
                        v-model="searchRegion"
                        :localdata="range"
                        :clear="false"
                        @change="change"
                    ></uni-data-select>
                </view>
            </template>
            <view
                v-for="(item, index) in list"
                :key="index"
                class="flex p-3 space-x-2"
            >
                <view>
                    <image
                        class="rounded-lg w-32 h-24"
                        mode="aspectFill"
                        src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
                    ></image>
                </view>
                <view
                    class="flex flex-col border-b"
                    style="width: calc(100% - 8rem - 16rpx)"
                >
                    <view class="text-base font-semibold">{{
                        item.title
                    }}</view>
                    <view class="mb-3">
                        <view>{{ item.desc }}</view>
                    </view>
                    <view class="flex items-end">
                        <view class="text-lg text-red-600 mr-5">{{
                            item.cost
                        }}</view>
                        <view class="text-gray-400">{{ item.average }}</view>
                    </view>
                </view>
            </view>
        </z-paging>
    </HomeBox>
</template>

<script setup lang="ts">
import HomeBox from "@/components/HomeBox/index.vue";
import { ref } from "vue";

const searchRegion = ref(0);
const range = ref([
    { value: 0, text: "吴江" },
    { value: 1, text: "苏州" },
    { value: 2, text: "其他" },
]);
const change = () => {};

const searchValue = ref("");
const search = () => {
    console.log(searchValue.value);
};

type listType = {
    title: string;
    desc: string;
    cost: string;
    average: string;
};
const list = ref<listType[]>([]);

const paging = ref();

const loadPage = (page: number) => {
    return new Promise((resolve) => {
        resolve([
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
        ]);
    });
};
const queryList = (pageNo: number, pageSize: number) => {
    console.log("加载");
    if (list.value.length > 20) {
        paging.value.complete([]);
        return;
    }
    loadPage(pageNo)
        .then((res) => {
            paging.value.complete(res);
        })
        .catch((_) => {
            paging.value.complete(false);
        });
};
</script>
<style scoped lang="scss"></style>
